<template>
  <view class="container">
    <scroll-view class="content" scroll-y>
      <!-- 用户信息 -->
      <view class="user-section">
        <view v-if="userStore.isLogin" class="user-info">
          <u-avatar :src="userStore.userInfo?.avatar" size="80"></u-avatar>
          <view class="user-details">
            <text class="nickname">{{ userStore.userInfo?.nickname }}</text>
            <view class="location">
              <u-icon name="map" size="14" color="#999"></u-icon>
              <text>{{ locationText }}</text>
            </view>
          </view>
        </view>
        <view v-else class="login-tip" @click="handleLogin">
          <u-avatar :src="defaultAvatar" size="80"></u-avatar>
          <text class="login-text">点击登录</text>
        </view>

        <!-- 会员标识 -->
        <view v-if="userStore.isVip" class="vip-badge">
          <u-icon name="vip-card" size="16" color="#ff9900"></u-icon>
          <text>VIP</text>
        </view>
      </view>

      <!-- 发布统计 -->
      <view v-if="userStore.isLogin" class="stats-section">
        <view class="stats-item">
          <text class="stats-value">{{ stats.totalPosts }}</text>
          <text class="stats-label">我的发布</text>
        </view>
        <view class="stats-item">
          <text class="stats-value">{{ stats.totalFavorites }}</text>
          <text class="stats-label">我的收藏</text>
        </view>
        <view class="stats-item">
          <text class="stats-value">{{ userStore.remainingPosts }}/{{ userStore.dailyPostLimit }}</text>
          <text class="stats-label">今日剩余</text>
        </view>
      </view>

      <!-- 功能菜单 -->
      <view class="menu-section">
        <view class="menu-item" @click="goToMyPosts">
          <view class="menu-left">
            <u-icon name="file-text" size="20" color="#5677fc"></u-icon>
            <text class="menu-text">我的发布</text>
          </view>
          <view class="menu-right">
            <u-icon name="arrow-right" size="16" color="#999"></u-icon>
          </view>
        </view>

        <view class="menu-item" @click="goToMyFavorites">
          <view class="menu-left">
            <u-icon name="star" size="20" color="#ff9900"></u-icon>
            <text class="menu-text">我的收藏</text>
          </view>
          <view class="menu-right">
            <u-icon name="arrow-right" size="16" color="#999"></u-icon>
          </view>
        </view>

        <view class="menu-item" @click="goToMessages">
          <view class="menu-left">
            <u-icon name="chat" size="20" color="#19be6b"></u-icon>
            <text class="menu-text">我的消息</text>
            <view v-if="chatStore.unreadCount > 0" class="message-badge">
              {{ chatStore.unreadCount }}
            </view>
          </view>
          <view class="menu-right">
            <u-icon name="arrow-right" size="16" color="#999"></u-icon>
          </view>
        </view>
      </view>

      <!-- 会员服务(预留) -->
      <view class="menu-section">
        <view class="menu-item disabled">
          <view class="menu-left">
            <u-icon name="vip-card-fill" size="20" color="#ff9900"></u-icon>
            <text class="menu-text">会员特权</text>
            <text class="coming-soon">即将开放</text>
          </view>
          <view class="menu-right">
            <u-icon name="arrow-right" size="16" color="#999"></u-icon>
          </view>
        </view>
      </view>

      <!-- 设置 -->
      <view class="menu-section">
        <view class="menu-item" @click="goToSettings">
          <view class="menu-left">
            <u-icon name="setting" size="20" color="#909399"></u-icon>
            <text class="menu-text">设置</text>
          </view>
          <view class="menu-right">
            <u-icon name="arrow-right" size="16" color="#999"></u-icon>
          </view>
        </view>

        <view class="menu-item" @click="goToHelp">
          <view class="menu-left">
            <u-icon name="question-circle" size="20" color="#909399"></u-icon>
            <text class="menu-text">帮助与反馈</text>
          </view>
          <view class="menu-right">
            <u-icon name="arrow-right" size="16" color="#999"></u-icon>
          </view>
        </view>

        <view class="menu-item" @click="goToAbout">
          <view class="menu-left">
            <u-icon name="info-circle" size="20" color="#909399"></u-icon>
            <text class="menu-text">关于菏泽寻环</text>
          </view>
          <view class="menu-right">
            <u-icon name="arrow-right" size="16" color="#999"></u-icon>
          </view>
        </view>
      </view>

      <!-- 退出登录 -->
      <view v-if="userStore.isLogin" class="logout-section">
        <u-button type="error" plain @click="handleLogout">退出登录</u-button>
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { useUserStore } from '@/store/user'
import { useChatStore } from '@/store/chat'
import { userApi } from '@/api'
import { showConfirm } from '@/utils/common'

const userStore = useUserStore()
const chatStore = useChatStore()

// 状态
const stats = ref({
  totalPosts: 0,
  totalFavorites: 0,
  totalLikes: 0,
  totalContacts: 0
})

const defaultAvatar = 'https://via.placeholder.com/80'

// 计算属性
const locationText = computed(() => {
  const location = userStore.location
  if (!location) return '未设置位置'

  return `${location.city} · ${location.district}`
})

// 生命周期
onMounted(() => {
  if (userStore.isLogin) {
    loadUserStats()
  }
})

onShow(() => {
  if (userStore.isLogin) {
    loadUserStats()
  }
})

/**
 * 加载用户统计
 */
const loadUserStats = async () => {
  try {
    const res = await userApi.getStats()
    stats.value = res
  } catch (err) {
    console.error('加载统计失败:', err)
  }
}

/**
 * 登录
 */
const handleLogin = async () => {
  const success = await userStore.wechatLogin()
  if (success) {
    loadUserStats()
  }
}

/**
 * 退出登录
 */
const handleLogout = async () => {
  const confirmed = await showConfirm('确认退出登录？')
  if (confirmed) {
    userStore.logout()
  }
}

/**
 * 跳转到我的发布
 */
const goToMyPosts = () => {
  if (!checkLogin()) return
  uni.navigateTo({
    url: '/pages/my/posts'
  })
}

/**
 * 跳转到我的收藏
 */
const goToMyFavorites = () => {
  if (!checkLogin()) return
  uni.navigateTo({
    url: '/pages/my/favorites'
  })
}

/**
 * 跳转到消息
 */
const goToMessages = () => {
  if (!checkLogin()) return
  uni.switchTab({
    url: '/pages/chat/index'
  })
}

/**
 * 跳转到设置
 */
const goToSettings = () => {
  uni.navigateTo({
    url: '/pages/my/settings'
  })
}

/**
 * 跳转到帮助
 */
const goToHelp = () => {
  uni.navigateTo({
    url: '/pages/my/help'
  })
}

/**
 * 跳转到关于
 */
const goToAbout = () => {
  uni.navigateTo({
    url: '/pages/my/about'
  })
}

/**
 * 检查登录状态
 */
const checkLogin = (): boolean => {
  if (!userStore.isLogin) {
    uni.showToast({
      title: '请先登录',
      icon: 'none'
    })
    return false
  }
  return true
}
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
  background-color: var(--bg-color-page);
}

.content {
  height: 100%;
}

.user-section {
  position: relative;
  padding: var(--spacing-xl) var(--spacing-md);
  background: linear-gradient(135deg, var(--primary-color) 0%, #4166f5 100%);
  color: #ffffff;

  .user-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);

    .user-details {
      flex: 1;

      .nickname {
        display: block;
        font-size: 36rpx;
        font-weight: bold;
        margin-bottom: 8rpx;
      }

      .location {
        display: flex;
        align-items: center;
        gap: 8rpx;
        font-size: 24rpx;
        opacity: 0.9;
      }
    }
  }

  .login-tip {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);

    .login-text {
      font-size: 32rpx;
      font-weight: 500;
    }
  }

  .vip-badge {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: 8rpx;
    padding: 8rpx 16rpx;
    background-color: rgba(255, 153, 0, 0.2);
    border-radius: var(--radius-round);
    font-size: 24rpx;
  }
}

.stats-section {
  display: flex;
  padding: var(--spacing-lg) var(--spacing-md);
  background-color: var(--bg-color);
  margin-bottom: var(--spacing-sm);

  .stats-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8rpx;

    .stats-value {
      font-size: 36rpx;
      font-weight: bold;
      color: var(--text-color);
    }

    .stats-label {
      font-size: 24rpx;
      color: var(--text-color-secondary);
    }
  }
}

.menu-section {
  background-color: var(--bg-color);
  margin-bottom: var(--spacing-sm);

  .menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md);
    border-bottom: 1rpx solid var(--border-color-lighter);

    &:last-child {
      border-bottom: none;
    }

    &.disabled {
      opacity: 0.6;
    }

    .menu-left {
      display: flex;
      align-items: center;
      gap: var(--spacing-sm);

      .menu-text {
        font-size: 30rpx;
        color: var(--text-color);
      }

      .message-badge {
        min-width: 32rpx;
        height: 32rpx;
        padding: 0 8rpx;
        background-color: var(--error-color);
        color: #ffffff;
        font-size: 20rpx;
        border-radius: var(--radius-round);
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .coming-soon {
        font-size: 24rpx;
        color: var(--warning-color);
        margin-left: 8rpx;
      }
    }
  }
}

.logout-section {
  padding: var(--spacing-xl) var(--spacing-md);
}
</style>
